<template>
    <div class="customerManagement">
        <div class="contentLeft">
            <div class="menuList">
                <img src="../../../static/image/menu.png" alt="">
                <p>{{ $t('assemble.客户管理') }}</p>
            </div>
        </div>
        <div v-if="pageFlag == 0" class="contentRight">
            <div class="rightTop">
                <div class="title">{{ $t('assemble.我的客户') }}</div>
                <div class="btns">
                    <div class="btnitem baobei" @click="gotoAddorEdit('add')">{{ $t('assemble.报备') }}</div>

                    <el-upload :multiple="false" :on-success="onUploadSuccess"
                        :action="'http://10.0.0.74:10012/api/user/import'" :headers="headers" class="upload-demo">
                        <div class="btnitem">{{ $t('assemble.导入') }}</div>

                        <!-- <div slot="tip" class="el-upload__tip">只能上传xls文件,且不超过500kb</div> -->
                    </el-upload>
                    <!-- <div class="btnitem" @click="handleImport">{{ $t('assemble.导入') }}</div> -->
                    <div class="btnitem" @click="handleExport">{{ $t('assemble.导出') }}</div>
                </div>
            </div>

            <div class="rightContent">
                <div class="formbox">
                    <el-form :inline="true" :model="formData" ref="formData" class="demo-form-inline">
                        <el-form-item>
                            <input class="inputbox" v-model="formData.email" type="text" :placeholder="$t('assemble.邮箱')">
                        </el-form-item>

                        <el-form-item>
                            <input class="inputbox" v-model="formData.name" type="text" :placeholder="$t('assemble.客户名字')">
                        </el-form-item>

                        <el-form-item>
                            <el-date-picker v-model="datatime" type="daterange" :range-separator="$t('assemble.至')"
                                :start-placeholder="$t('assemble.开始日期')" :end-placeholder="$t('assemble.结束日期')" @change="handleData">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item>
                            <div class="formbtn">
                                <div class="btnitem" style="background-color: #0057A7;" @click="getUserList">{{
                                    $t('assemble.搜索') }}</div>
                                <div class="btnitem" style="background-color: #D32526 ;" @click="handleReset">{{
                                    $t('assemble.清空') }}</div>
                            </div>
                        </el-form-item>

                        <el-form-item>
                            <el-select v-model="formData.status" placeholder="请选择" @change="handleStatus">
                                <el-option v-for="item in alloptions" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <!-- <el-select v-model="formData.sort" placeholder="请选择" @change="handleSort">
                                <el-option v-for="item in sortList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select> -->
                            <el-button @click="handleSort">{{ $t('assemble.排序') }}</el-button>
                        </el-form-item>
                        <div class="formbtn" style="margin-left: 0; margin-top: 10px;">
                            <div v-if="allFlag" class="btnitem" style="background-color: #0057A7;" @click="handleAllCheck">
                                {{ $t('assemble.全选') }}</div>
                            <div v-else class="btnitem" style="background-color: #0057A7;" @click="handleAllCheck">{{
                                $t('assemble.全不选') }}</div>
                            <div class="btnitems" style="background-color: #D32526 ;" @click="handleSelectDel">{{
                                $t('assemble.已选删除') }}</div>
                            <!-- <div class="btnitems" style="background-color: #D32526 ;" @click="handleSelectDel">{{
                                $t('assemble.已选彻底删除') }}</div> -->
                        </div>
                    </el-form>
                </div>

                <div class="tableBox">
                    <div class="tableHeader">
                        <div style="width:30px ;"></div>
                        <!-- <p>{{ $t('assemble.客户头像') }} </p> -->
                        <p>{{ $t('assemble.客户名字') }}</p>
                        <p>{{ $t('assemble.联系电话') }}</p>
                        <p>{{ $t('assemble.邮箱') }}</p>
                        <p>{{ $t('assemble.项目') }}</p>
                        <p>{{ $t('assemble.状态') }}</p>
                        <p>{{ $t('assemble.操作') }}</p>
                    </div>

                    <div class="dataList">
                        <div class="dataitem" v-for="(item, index) in tableData" :key="index">
                            <div class="checkbox" style="width: 30px;margin-top: 30px;cursor: pointer;"
                                @click="handleCheck(index)">
                                <img v-if="item.check" src="../../../static/image/shi.png" alt="">
                                <img v-else src="../../../static/image/kong.png" alt="">
                            </div>
                            <!-- <p>{{ item.avatar }}</p> -->
                            <!-- <div style="width: 80px; text-align: center;">
                                <img class="avatarimg" :src="item.avatar" alt="">
                            </div> -->
                            <p style="width: 200px;text-align: center; line-height: 60px;">{{ item.username }}</p>
                            <p style="width: 150px;text-align: center; line-height: 60px;">{{ item.mobile }}</p>
                            <p style="width: 150px;text-align: center; line-height: 60px;">{{ item.email }}</p>
                            <p style="width: 75px;text-align: center; line-height: 60px;">{{ item.item }}</p>
                            <p v-if="item.status == 1"
                                style="width: 100px; text-align: center; line-height: 60px; color: #D32526;">{{
                                    $t('assemble.已联系没兴趣') }}</p>
                            <p v-if="item.status == 2"
                                style="width: 100px; text-align: center; line-height: 60px; color: #D32526;">{{
                                    $t('assemble.正在沟通中') }}</p>
                            <p v-if="item.status == 3"
                                style="width: 100px; text-align: center; line-height: 60px; color: #D32526;">{{
                                    $t('assemble.已完成') }}</p>
                            <p v-if="item.status == 4"
                                style="width: 100px; text-align: center; line-height: 60px; color: #D32526;">{{
                                    $t('assemble.介绍费已到账') }}</p>

                            <div style="width: 263px;">
                                <p class="databtn" @click="handleDetail(item.id)">{{ $t('assemble.详情') }}</p>
                                <p class="databtn" @click="gotoAddorEdit('edit', item)">{{ $t('assemble.编辑') }}</p>
                                <p class="databtn" style="border: 1px solid #D32526; color: #D32526;"
                                    @click="handlecenterDialogVisible(item.id)">{{ $t('assemble.删除') }}</p>
                            </div>
                        </div>

                    </div>
                    <div class="fenye">
                        <el-pagination background layout="prev, pager, next" :page-size="this.pageInfo.pageSize"
                            :page-sizes="[5, 10, 15, 20]" :total="pageInfo.total" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>


                </div>

            </div>

        </div>


        <div v-if="pageFlag == 1" class="contentRight">
            <div class="rightTop">
                <div class="title">{{ pageTitle }}</div>
            </div>

            <div class="rightContent">
                <div class="addoreditformbox">
                    <el-form ref="AddorEditform" :model="AddorEditform" label-width="200px">
                        <el-form-item label="名(First Name)：">
                            <el-input v-model="AddorEditform.name"></el-input>
                        </el-form-item>
                        <el-form-item label="姓(Last Name)：">
                            <el-input v-model="AddorEditform.surname"></el-input>
                        </el-form-item>
                        <el-form-item label="电话号码(Phone Number)：">
                            <el-input v-model="AddorEditform.mobile"></el-input>
                        </el-form-item>
                        <el-form-item label="城市(City)：">
                            <!-- <el-input v-model="AddorEditform.city"></el-input> -->
                            <el-cascader v-model="cityValue" :options="cityList" @change="handleChangeCity"></el-cascader>
                        </el-form-item>
                        <el-form-item label="邮箱(Email Address)：">
                            <el-input v-model="AddorEditform.email"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="okorclose">
                    <div class="okorclosebtn ok" @click="handleAddorEdit">{{ $t('assemble.确认') }}</div>
                    <div class="okorclosebtn close" @click="handleAddOrEditPage">{{ $t('assemble.取消') }}</div>

                </div>

            </div>

        </div>

        <div v-if="pageFlag == 2" class="contentRight">
            <div class="rightTop rightDetail">
                <div class="title">{{ $t('assemble.客户信息') }}</div>
                <div class="addbtn" style="cursor: pointer;" @click="gotoAddorEdit('add')">{{ $t('assemble.添加新用户') }}</div>
            </div>
            <div class="rightContent">
                <div class="messagebox">
                    <div class="detailBox">
                        <div class="avatarBox">
                            <img src="../../../static/image/logo.png" alt="">
                        </div>
                        <div class="detailitem">
                            <div><span style="margin-right: 30px;">{{ $t('assemble.名') }}:</span> {{ userDetailData.name }}
                            </div>
                            <div><span style="margin-right: 30px;">{{ $t('assemble.姓') }}:</span>{{ userDetailData.surname
                            }}</div>
                            <div><span style="margin-right: 30px;">{{ $t('assemble.电话号码') }}:</span>{{ userDetailData.mobile
                            }}</div>
                            <div><span style="margin-right: 30px;">{{ $t('assemble.城市') }}:</span>{{ userDetailData.city }}
                            </div>
                            <div><span style="margin-right: 30px;">{{ $t('assemble.邮箱') }}:</span>{{ userDetailData.email }}
                            </div>
                        </div>
                    </div>

                    <div class="btnbox">
                        <div class="btn" style="border: 1px solid #0057A7; color: #0057A7;" @click="handleEdit">{{
                            $t('assemble.编辑') }}</div>
                        <div class="btn" @click="handleOkDetail" style="border: 1px solid #90C93B; color: #90C93B;">{{
                            $t('assemble.完成') }}</div>
                        <div class="btn" style="border: 1px solid #D32526; color: #D32526;" @click="handleEditDel">{{
                            $t('assemble.删除') }}</div>
                    </div>
                </div>

                <div class="schedule">
                    <div class="title">
                        {{ $t('assemble.跟进进度') }}
                    </div>
                    <div class="scheduleBox">
                        <div style="width:1200px">
                            <el-steps :active="userDetailData.status" align-center finish-status="success">
                                <el-step title="已联系,没兴趣(Not Interested)"></el-step>
                                <el-step title="正在沟通中(In Progress)"></el-step>
                                <el-step title="已完成(Completed)"></el-step>
                                <el-step title="介绍费已到账(Paid)"></el-step>
                            </el-steps>
                        </div>

                        <div class="btn" style="border: 1px solid #0057A7; color: #0057A7;"
                            @click="editStatusVisible = true">{{ $t('assemble.编辑') }}</div>
                    </div>
                </div>

                <div class="schedule">
                    <div class="title">
                        {{ $t('assemble.更改详情') }}
                    </div>
                    <div class="heng">
                    </div>
                    <div v-if="userDetailData.schedule">
                        {{ userDetailData.updated_at }} 将状态由{{ userDetailData.schedule }}改为{{ userDetailData.status_text }}

                    </div>
                </div>

            </div>
        </div>

        <el-dialog title="提示(Tips)" :visible.sync="centerDialogVisible" width="30%" center>
            <div class="deltext"> {{ $t('assemble.确定删除') }}</div>
            <div slot="footer" class="dialog-footer">
                <div class="btnitem ok" @click="handleDeleteUser">{{ $t('assemble.确定') }}</div>
                <div class="btnitem close" @click="centerDialogVisible = false">{{ $t('assemble.取消') }}</div>
            </div>
        </el-dialog>


        <el-dialog title="更改进度状态(Change progress status)" :visible.sync="editStatusVisible" width="30%" center>
            <div class="deltext">
                <el-select v-model="editStatusid" placeholder="请选择" @change="handleeditStatus">
                    <el-option v-for="item in options" :key="item.id" :value="item.id" :label="item.name">
                    </el-option>
                </el-select>

            </div>
            <div slot="footer" class="dialog-footer" style="margin-top: 100px;">
                <div class="btnitem ok" @click="handleeditstatusData">{{ $t('assemble.确定') }}</div>
                <div class="btnitem close" @click="editStatusVisible = false">{{ $t('assemble.取消') }}</div>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import Header from '@/components/header/index.vue'
import debounce from '@/utils/debounce.js';

import { userStatus, addOredit, userList, userDel, userDetail, editStatus, userexport, getCitilist } from "../../../utils/api.js"
export default {
    components: {
        Header,
    },
    data() {
        return {
            piliceholderList:{
                email: this.$t('assemble.邮箱'),
                name:this.$t('assemble.客户名称'),
            },
            editStatusid: 1,
            editStatusVisible: false,
            allFlag: true,
            id: '',
            pageFlag: 0,
            pageTitle: "添加新用户(Add a new user)",
            formData: {
                email: '',
                name: '',
                status: "0",
                sort: 2,
                start_time: '',
                end_time: '',
            },
            AddorEditform: {
                name: "",//名
                surname: "",//姓
                mobile: "",//电话号码
                city: "",//城市
                email: "",//邮箱
            },
            datatime: '',
            options: [],
            sortList: [
                {
                    id: 1,
                    name: "升序(Ascending order)",
                },
                {
                    id: 2,
                    name: "降序(Descending order)",
                },
            ],
            tableData: [],
            alloptions: [{
                id: "0",
                name: "全部(All)"
            }],
            centerDialogVisible: false,
            delId: "",
            userDetailData: {},
            editStatus: {
                status: 0,
                id: ""
            },
            pageInfo: {
                total: 0,
                page: 1,
                pageSize: 5
            },
            importVisible: false,
            headers: {
                Authorization: ''
            },
            sortFlag: false,
            cityList: [],
            cityValue:[],
        }
    },
    created() {
        this.getuserStatus()
        this.getUserList()
        let token = localStorage.getItem('token')
        this.headers.Authorization = 'Bearer' + token
        this.getCitilist()
    },
    methods: {
        handleChangeCity(value) {
        console.log(value);
        this.AddorEditform.city = value[0] + '/' + value[1]
      },

        async getCitilist() {
            let res = await getCitilist()
            if (res.code == 1000) {
                console.log("城市列表", res)
                res.data.forEach((item, index) => {
                    item.value = item.name
                    item.label = item.name
                    let cityChildren = []
                    item.son.forEach((subitem, subindex) => {
                        cityChildren.push({
                            value: subitem.name,
                            label: subitem.name
                        })
                    })
                    item.children = cityChildren
                })

                this.cityList = res.data

                // res.data.forEach((item,index)=>{
                //     this.cityList[index].value = item.value
                //     this.cityList[index].name = item.name
                //     item.children.forEach((subitem,subindex)=>{

                //         this.cityList[index].children[index].value = subitem.value
                //         this.cityList[index].children[index].name = subitem.name

                //     })
                // })

                console.log("rrrrrrrrrrrrrrr", this.cityList)
            }
        },

        async handleExport() {
            let flag = false
            let ids = ''
            this.tableData.forEach((item, index) => {
                if (item.check) {
                    flag = true
                    ids += item.id + ','
                }
            })
            if (!flag) {
                this.$message({
                    showClose: true,
                    message: '请选择需要导出的数据！',
                    type: 'warning'
                });
            } else {
                let res = await userexport({
                    ids: ids
                })
                if (res.code == 1000) {
                    this.$message({
                        message: '导出成功',
                        type: 'success'
                    });
                    console.log("导出数据", res)
                    window.open(res.data)
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }
        },

        onUploadSuccess(response, file) {
            console.log("导入文件", response, file)
            if (response.code == 1000) {
                this.$message({
                    message: '导入成功',
                    type: 'success'
                });
                this.getUserList()
            } else {
                this.$message({
                    message: res.message,
                    type: 'warning'
                });
            }
            this.importVisible = false
            // 此处可以再添加方法，使导入的数据渲染到页面中，那就需要后端的接口实现。
        },
        handleEdit() {
            this.pageFlag = 1
            this.pageTitle = "编辑新用户(Edit New User)"
            this.id = this.userDetailData.id
            this.AddorEditform.name = this.userDetailData.name
            this.AddorEditform.surname = this.userDetailData.surname
            this.AddorEditform.mobile = this.userDetailData.mobile
            this.AddorEditform.city = this.userDetailData.city.split('/')
            this.cityValue = this.userDetailData.city.split('/')
            this.AddorEditform.email = this.userDetailData.email
            console.log("cityValue",cityValue)
        },
        handleEditDel() {
            this.centerDialogVisible = true
            this.delId = this.editStatus.id
            console.log(this.userDetailData, "this.userDetailData")

        },
        async handleeditstatusData() {
            let data = {
                token: localStorage.getItem('token'),
                status: this.editStatus.status,
                id: this.editStatus.id,
            }
            console.log("data", data)
            // return
            let res = await editStatus(data)
            if (res.code == 1000) {
                this.editStatusVisible = false
                this.$message({
                    message: res.message,
                    type: 'success'
                });
                this.handleDetail(this.editStatus.id)
            } else {
                this.$message({
                    message: res.message,
                    type: 'warning'
                });
            }
        },
        handleeditStatus(e) {
            this.editStatus.status = e

            console.log("rrrr", typeof (e))
        },
        async getuserStatus() {
            let res = await userStatus()
            console.log("eeee", res)
            if (res.code == 1000) {
                this.options = res.data
                this.options.forEach((item, index) => {
                    this.alloptions.push(item)
                })
            }
        },
        async getUserList() {
            console.log("sousuo")
            let data = {
                token: localStorage.getItem('token'),
                sort: this.formData.sort,
                status: this.formData.status,
                email: this.formData.email,
                name: this.formData.name,
                start_time: this.formData.start_time,
                end_time: this.formData.end_time,
                page_size: this.pageInfo.pageSize,
                page: this.pageInfo.page
            }
            let res = await userList(data)
            console.log("客户列表", res)
            this.tableData = res.data.data
            this.pageInfo.total = res.data.total
            this.tableData.forEach((item, index) => {
                item.check = false
            })
        },
        handleCheck(index) {
            console.log(index, this.tableData[index])
            this.tableData[index].check = !this.tableData[index].check
            this.$forceUpdate()
        },

        handleAddorEdit() {
            debounce(() => {
                this.handleAddorEdits()
            }, 2000)
        },

        async handleAddorEdits() {
            
            let data = {}
            if (this.pageTitle == '添加新用户(Add a new user)') {
                data = {
                    name: this.AddorEditform.name,
                    surname: this.AddorEditform.surname,
                    mobile: this.AddorEditform.mobile,
                    city: this.AddorEditform.city,
                    email: this.AddorEditform.email,
                    id: "",
                    token: localStorage.getItem('token')
                }
            } else {
                data = {
                    name: this.AddorEditform.name,
                    surname: this.AddorEditform.surname,
                    mobile: this.AddorEditform.mobile,
                    city: this.AddorEditform.city,
                    email: this.AddorEditform.email,
                    id: this.id,
                    token: localStorage.getItem('token')
                }
            }
            console.log("data", data)
            // return
            let res = await addOredit(data)
            console.log("添加用户", res)
            if (res.code == 1000) {
                this.$message({
                    message: res.message,
                    type: 'success'
                });
                this.cityValue = []
                setTimeout(() => {
                    this.$router.go(0)
                }, 1000)
            } else {
                this.$message({
                    message: res.message,
                    type: 'warning'
                });
            }

        },

        handleData(e) {
            // console.log("日期", e)
            this.formData.start_time = this.newDate(e[0])
            this.formData.end_time = this.newDate(e[1])
            console.log("eeeeeeee", this.formData.start_time, this.formData.end_time)

        },
        newDate(time) {
            var date = new Date(time)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? '0' + m : m
            var d = date.getDate()
            d = d < 10 ? '0' + d : d
            return y + '-' + m + '-' + d
        },

        handleStatus(e) {
            console.log("状态", e)
            this.formData.status = e
        },
        handleSort() {
            this.sortFlag = !this.sortFlag
            this.$forceUpdate()

            if (this.sortFlag) {
                this.formData.sort = 1

            } else {
                this.formData.sort = 2

            }

            this.getUserList()
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.page = val
            this.getUserList()
        },
        currentPage4() { },
        handlecenterDialogVisible(id) {
            this.centerDialogVisible = true
            this.delId = id
        },

        async handleDeleteUser() {
            let data = {
                id: this.delId,
                token: localStorage.getItem('token')
            }
            console.log("data", data)
            let res = await userDel(data)
            console.log("del", res)
            if (res.code == 1000) {
                this.centerDialogVisible = false
                this.$message({
                    message: "删除成功",
                    type: 'success'
                });
                setTimeout(() => {
                    this.$router.go(0)
                }, 1000)
            } else {
                this.$message({
                    message: res.message,
                    type: 'warning'
                });
            }
        },
        handleSelectDel() {
            let ids = ""
            this.tableData.forEach((item, index) => {
                if (item.check) {
                    ids += item.id + ","
                }
            })
            this.delId = ids
            this.centerDialogVisible = true
            console.log("ids", ids)
        },
        handleAllCheck() {
            this.allFlag = !this.allFlag
            this.tableData.forEach((item, index) => {
                item.check = !this.allFlag
            })
            this.$forceUpdate()
            console.log("this.$forceUpdate()", this.$forceUpdate())

            console.log("dataList", this.tableData, this.allFlag)
        },
        handleReset() {
            this.formData.email = ""
            this.formData.name = ""
            this.formData.sort = 2
            this.formData.status = "0"
            this.datatime = ""
            this.getUserList()
        },
        async handleDetail(id) {
            this.editStatus.id = id
            this.pageFlag = 2
            let res = await userDetail({
                id: id,
                token: localStorage.getItem('token')
            })
            console.log("客户详情", res)
            this.userDetailData = res.data

        },
        handleOkDetail() {
            location.reload()

            // this.pageFlag = 0
        },
        gotoAddorEdit(type, item) {
            this.pageFlag = 1
            if (type == 'add') {
                this.pageTitle = "添加新用户(Add a new user)"
            }
            if (type == 'edit') {
                this.pageTitle = "编辑新用户(Edit New User)"
                console.log("item", item)
                this.id = item.id
                this.AddorEditform.name = item.name
                this.AddorEditform.surname = item.surname
                this.AddorEditform.mobile = item.mobile
                this.AddorEditform.city = item.city
                this.cityValue = item.city.split('/')
                this.AddorEditform.email = item.email
            }
        },
        handleAddOrEditPage() {
            this.pageFlag = 0
            this.AddorEditform.name = ""
            this.AddorEditform.surname = ""
            this.AddorEditform.mobile = ""
            this.AddorEditform.city = ""
            this.AddorEditform.email = ""
            this.cityValue = []
        },
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload-list {
    display: none;
}

::v-deep .el-date-editor .el-range-separator {
    width: 25%;
}

.btnitems {
    // width: 132px;
    height: 37px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    font-size: 13px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 16px;
    text-align: center;
    line-height: 37px;
    margin-left: 20px;
    cursor: pointer;
    padding: 0 30px;
}

.customerManagement {
    width: 1440px;
    margin: 0 auto;
    display: flex;

    .contentLeft {
        // width: 340px;
        width: 255px;
        // background: #FFFFFF;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        padding-left: 10px;
        box-sizing: border-box;

        .menuList {
            display: flex;
            align-items: center;
            // width: 320px;
            width: 240px;

            height: 53px;
            background: #EDF7FF;
            border-radius: 10px 10px 10px 10px;
            padding-left: 30px;
            box-sizing: border-box;
            cursor: pointer;

            img {
                width: 21px;
                height: 21px;
            }

        }

    }

    .contentRight {
        width: 1163px;
        // height: 500px;
        background: #F7F8FA;
        padding: 20px;
        box-sizing: border-box;

        .rightTop {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
                font-size: 15px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #333333;
                line-height: 18px;
            }

            .btns {
                display: flex;

                .btnitem {
                    // width: 132px;
                    width: 99px;
                    height: 37px;
                    background: #FFFFFF;
                    border-radius: 10px 10px 10px 10px;
                    font-size: 13px;
                    font-family: PingFang SC-Bold, PingFang SC;
                    font-weight: bold;
                    color: #333333;
                    line-height: 21px;
                    text-align: center;
                    line-height: 37px;
                    margin-left: 15px;
                    cursor: pointer;
                }

                .baobei {

                    background: #0057A7;
                    color: #FFFFFF;
                }
            }
        }

        .rightDetail {
            display: flex;
            justify-content: space-between;

            .addbtn {
                // width: 132px;
                height: 37.5px;
                background: #0057A7;
                border-radius: 10px 10px 10px 10px;
                text-align: center;
                line-height: 37.5px;
                font-size: 13px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
                padding: 0 20px;
            }



        }

        .rightContent {
            .messagebox {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px;
                box-sizing: border-box;
                height: 120px;


                .detailBox {
                    display: flex;

                    .avatarBox {
                        width: 120px;
                        height: 120px;
                        border-radius: 20px 20px 20px 20px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .detailitem {
                        height: 120px;
                        font-size: 14px;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 16px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        margin-left: 20px;
                    }


                }

                .btnbox {
                    width: 305px;
                    display: flex;
                    justify-content: space-between;

                    .btn {
                        // width: 75px;
                        height: 30px;
                        border-radius: 40px 40px 40px 40px;
                        // border: 1px solid #0057A7;
                        font-size: 16px;
                        font-family: PingFang SC-Bold, PingFang SC;
                        font-weight: bold;
                        color: #0057A7;
                        line-height: 30px;
                        text-align: center;
                        cursor: pointer;
                        padding: 0 10px;
                    }
                }

            }

            .schedule {
                margin-top: 49px;

                .title {
                    font-size: 15px;
                    font-family: PingFang SC-Bold, PingFang SC;
                    font-weight: bold;
                    color: #333333;
                    line-height: 18px;
                }

                .scheduleBox {
                    margin-top: 30px;
                    display: flex;

                    ::v-deep .el-step__head.is-success {
                        color: #0057A7;
                        border-color: #0057A7;
                    }

                    ::v-deep .el-step__title.is-success {
                        color: #0057A7;
                    }

                }

                .heng {
                    width: 100%;
                    height: 1px;
                    background: #EEEEEE;
                    margin: 15px 0;
                }
            }

        }

        .rightContent {
            // width: 1520px;
            width: 1140px;
            // height: 500px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            margin-top: 20px;
            padding: 30px;
            box-sizing: border-box;
            padding-bottom: 108px;

            .formbox {
                .inputbox {
                    width: 225px;
                    height: 37px;
                    background: #F7F8FA;
                    border-radius: 10px 10px 10px 10px;
                    opacity: 1;
                    outline: none;
                    border: none;
                    text-indent: 15px;
                }

                .formbtn {
                    display: flex;
                    margin-left: 70px;

                    .btnitem {
                        width: 66px;
                        height: 37px;
                        border-radius: 10px 10px 10px 10px;
                        font-size: 13px;
                        font-family: PingFang SC-Bold, PingFang SC;
                        font-weight: bold;
                        color: #333333;
                        text-align: center;
                        line-height: 37px;
                        margin-left: 15px;
                        cursor: pointer;
                        color: white;
                    }
                }

                ::v-deep .el-date-editor.el-input__inner {
                    height: 37px;
                    background-color: #F7F8FA;
                }

                ::v-deep .el-date-editor .el-range-input {
                    // height: 50px;
                    background-color: #F7F8FA;
                }

                ::v-deep .el-input__inner {
                    border: none;
                    border-radius: 10px;
                }

                ::v-deep .el-date-editor .el-range-separator {
                    line-height: 34px;
                }

                ::v-deep .el-input--suffix .el-input__inner {
                    background-color: #F7F8FA;
                    height: 37px;
                }

                ::v-deep .el-input {
                    width: 225px;
                }
            }

            .tableBox {
                margin-top: 30px;

                .tableHeader {
                    width: 1095px;
                    height: 79px;
                    display: flex;
                    justify-content: space-between;
                    // padding-left: 110px;
                    padding-left: 15px;
                    box-sizing: border-box;

                    p {
                        font-size: 15px;
                        font-family: PingFang SC-Bold, PingFang SC;
                        font-weight: bold;
                        color: #333333;
                        line-height: 79px;

                        // &:nth-of-type(1) {
                        //     width: 80px;
                        //     text-align: center;
                        // }

                        &:nth-of-type(1) {
                            width: 200px;
                            text-align: center;
                        }

                        &:nth-of-type(2) {
                            width: 150px;
                            text-align: center;
                        }

                        &:nth-of-type(3) {
                            width: 150px;
                            text-align: center;
                        }

                        &:nth-of-type(4) {
                            width: 75px;
                            text-align: center;
                        }

                        &:nth-of-type(5) {
                            width: 100px;
                            text-align: center;
                        }

                        &:nth-of-type(6) {
                            width: 262px;
                            text-align: center;
                        }
                    }

                }

                .dataList {
                    margin-top: 30px;

                    .dataitem {
                        display: flex;
                        justify-content: space-between;
                        width: 1095px;
                        height: 106px;
                        background: #F7F8FA;
                        border-radius: 10px 10px 10px 10px;
                        opacity: 1;
                        margin-bottom: 7px;
                        padding-left: 15px;
                        padding-top: 23px;
                        box-sizing: border-box;
                        font-size: 13px;

                        .avatarimg {
                            width: 60px;
                            height: 60px;
                            border-radius: 63px 63px 63px 63px;
                        }
                    }
                }

            }

            .addoreditformbox {
                ::v-deep .el-input__inner {
                    background: #F7F8FA;
                    border: 1px solid #F7F8FA;
                    width: 717px;
                    height: 37px;
                }

            }

            .okorclose {
                width: 327px;
                display: flex;
                justify-content: space-between;
                margin: 30px auto;

                .okorclosebtn {
                    width: 99px;
                    height: 37px;
                    border-radius: 10px 10px 10px 10px;
                    opacity: 1;
                    font-size: 13px;
                    font-family: PingFang SC-Bold, PingFang SC;
                    font-weight: bold;
                    line-height: 37px;
                    text-align: center;
                    cursor: pointer;
                }

                .ok {

                    background: #0057A7;
                    color: #FFFFFF;
                }

                .close {

                    border: 1px solid #CCCCCC;
                }
            }
        }

    }
}

.databtn {
    width: 75px;
    height: 30px;
    border-radius: 30px 30px 30px 30px;
    border: 1px solid #0057A7;
    font-size: 13px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #0057A7;
    line-height: 30px;
    text-align: center;
    display: inline-block;
    margin-right: 7px;
    cursor: pointer;
}

.deltext {
    width: 300px;
    height: 19px;
    font-size: 13px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 19px;
    margin: 0 auto;
    text-align: center;

}

.dialog-footer {
    width: 296;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .btnitem {
        // width: 33px;
        height: 37px;
        border-radius: 10px 10px 10px 10px;
        opacity: 1;
        font-size: 13px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 37px;
        text-align: center;
        cursor: pointer;
        padding: 0 20px;
    }

    .ok {
        background: #0057A7;
        color: #ffffff;
    }

    .close {
        border: 1px solid #CCCCCC;
        color: black;
    }
}

.fenye {
    margin-top: 37px;

    margin-right: 45px;
    float: right;

    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #0057A7;
    }
}

.btn {
    width: 75px;
    height: 30px;
    border-radius: 40px 40px 40px 40px;
    // border: 1px solid #0057A7;
    font-size: 13px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #0057A7;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}
</style>